<template>
  <div class="marquee-container" :style="{ backgroundColor: props.bgColor }">
    <div class="flex items-center" :style="{ backgroundColor: props.bgColor }" style="position: relative; z-index: 10;">
      <img style="width: 20px; height: 20px;" src="~/assets/images/public/msg.png" alt="">
    </div>
    
    <div v-if="props.text" class="marquee-text" :style="{color: props.textColor}">{{ props.text }}</div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  bgColor: {
    type: String,
    default: '#ffefe0'
  },
  text: {
    type: String,
    default: ''
  },
  textColor: {
    type: String,
    default: '#FE6C09'
  }
})
</script>

<style scoped>
.marquee-container {
  white-space: nowrap;
  display: flex;
  align-items: center;
  width: 98%;
  overflow-x: hidden;
}

.marquee-text {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-text 12s linear infinite;
  font-size: 12px;
}

@keyframes scroll-text {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}
</style>